<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-tickets">
      <!--tab-->
      <div class="weui-tab ga-tab">
        <div class="weui-navbar">
          <block v-for="(item,index) in tabs" :key="index">
            <div :id="index" :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
              <div class="weui-navbar__title">{{item}}</div>
            </div>
          </block>
          <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
        </div>
        <div class="weui-tab__panel">
          <!--0-->
          <div class="weui-tab__content" :hidden="activeIndex != 0" v-for="(item,index) in ticketslist" :key="index" v-if="item.status==1 && item.use==0">
            <div class="item">
              <div class="box1">
                <p class="p1">
                  ¥
                  <span>{{item.coupon_amount}}</span>
                </p>
                <p class="p2">{{item.enable_amount>0?'单笔订单满'+item.enable_amount+'元':'无门槛使用'}}</p>
              </div>
              <div class="box2">
                <p class="p1">{{item.coupon_name}}</p>
                <p class="p2">{{item.coupon_starttime}}至{{item.coupon_endtime}}</p>
              </div>
            </div>
          </div>
          <!--1-->
          <div class="weui-tab__content" :hidden="activeIndex != 1" v-for="(item,index) in ticketslist" :key="index" v-if="item.status==0 || item.use==1">
            <div class="item fail">
              <div class="box1">
                <p class="p1">
                  ¥
                  <span>{{item.coupon_amount}}</span>
                </p>
                <p class="p2">{{item.enable_amount>0?'单笔订单满'+item.enable_amount+'元':'无门槛使用'}}</p>
              </div>
              <div class="box2">
                <p class="p1">{{item.coupon_name}}</p>
                <p class="p2">{{item.coupon_starttime}}至{{item.coupon_endtime}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--tab-->

      <a href="/pages/rule/main" class="rule-box">
        <i class="gaIcon wh"></i>
        <span>优惠券说明</span>
      </a>

    </div>
  </div>
</template>

<script>
import {isLogin} from '@/utils/handleLogin'
export default {

  data () {
    return {
      tabs: ["未使用", "已使用/已过期"],
      activeIndex: 0,
      ticketslist: [],
    }
  },

  created () {

  },
  onShow () {
    isLogin(() => {
       this.load()
    })
  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex == 0) {
        return 'weui-navbar__slider_0'
      }
      if (this.activeIndex == 1) {
        return 'weui-navbar__slider_1'
      }
    }
  },

  methods: {
    tabClick(e) {
      console.log(e);
      this.activeIndex = e.currentTarget.id;
    },
    async load () {
      this.$_util.ajax.post('https://guo-a.com/mapi/ticket/usercoupon?token=' + this.$store.state.Token).then((res) => {
        console.log(res)
        if(res.code === 200){
          this.ticketslist = res.data
        }
      })
       
    }
  }
}
</script>
<style scoped>
  .weui-navbar__slider_0 {
    left:0;
    transform: translateX(0);
  }
  .weui-navbar__slider_1 {
    left:0;
    transform: translateX(375rpx);
  }
</style>
